<template>
  <div>
    <el-table
      :data="historyList"
      style="width: 100%">
      <el-table-column
        prop="username"
        :label="$t('ColonyHistory_username')">
<!--        用户名-->
<!--        :label="$t('文件名.變量名')"-->
<!--        label="用户名">-->
<!--集群测试历史记录-->
      </el-table-column>
      <el-table-column
        prop="baseURL"
        :label="$t('ColonyHistory_baseURL')">
      </el-table-column>
      <el-table-column
        :label="$t('ColonyHistory_operation')">
<!--        label="操作">-->
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="changeIp(scope.row)" :disabled="scope.row.baseURL === activeUrl">
            {{$t('ColonyHistory_switch')}}
<!--            切换-->
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('ColonyHistory_Currentserver')">
<!--        label="当前服务器">-->
        <template slot-scope="scope">
          <i :class="scope.row.baseURL === activeUrl ? 'el-icon-star-on' : ''"></i>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Vue from 'vue'
import { Table, TableColumn } from 'element-ui'
Vue.use(Table)
Vue.use(TableColumn)
export default {
  data () {
    return {
      historyList: [],
      activeUrl: ''
    }
  },
  mounted () {
    const userList = localStorage.getItem('userList')
    if (userList) {
      this.historyList = JSON.parse(userList)
    }
    this.activeUrl = localStorage.getItem('baseURL')
    // console.log(this.activeUrl)
  },
  methods: {
    changeIp (item) {
      // 用户确认
      if (!confirm('确认切换？')) {
        return
      }
      // 修改user
      localStorage.setItem('user', JSON.stringify(item))
      // 修改ip
      localStorage.setItem('baseURL', item.baseURL)
      // 修改token
      localStorage.setItem('token', item.token)
      this.$message({
        showClose: true,
        /*message: 'change success. auto refresh ,please wait*/
        message: '切换成功！自动刷新页面，请耐性等待！',
        type: 'success'
      })
      // 500毫秒后刷新页面
      setTimeout(() => {
        location.reload()
      }, 500)
    }
  }
}
</script>
